<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tomcat Comet Chat</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!--
<script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
-->
	
<script type="text/javascript">
	jQuery(function($) {

		var ajax;

		function OnMessage() {
			ajax = $.ajax({
				type : 'GET',
				url : 'chat',
				dataType : 'html',
				success : function(text) {
					$('#messages').append('<span>' + text + '</span></br>');
					OnMessage();
				},
				error : function() {
					$('#chat').hide();
					$('#connexion').show();
					$('#messages').empty();
				}
			});
		}

		$('#connect').click(function() {
			$.ajax({
				type: 'POST',
				url : 'login', 
				data : { user : $('#user').val() },
				success : function() {
					OnMessage();
					$('#connexion').hide();
					$('#chat').show();
				},
				error : function() {
		
				},
			});
		});

		$('#send').click(function() {			
			if (ajax) {
				$.ajax({
					type: 'POST',
					url : 'chat', 
					data : { message : $('#message').val() },
					success : function() {
						$('#message').val('');
					},
					error : function() {
			
					},
				});
			}
		});

		$('#disconnect').click(function() {
			if (ajax) {
				
				$.ajax({
					type: 'POST',
					url : 'chat', 
					data : { message : '/disconnect' },
					success : function() {
						$('#chat').hide();
						$('#connexion').show();
						$('#messages').empty();
					},
					error : function() {
			
					},
				});
			}
		});
	});
</script>
<style type="text/css">
legend {
	font-weight: bold;
}

#chat {
	display: none;
}

#messages {
	margin: 5px;
	padding: 5px;
	border: 2px groove #f5f5f5;
}
</style>
</head>
<body>
	<h2>Chat</h2>
	<fieldset id="connexion">
		<legend>Connexion</legend>
		<label for="user">User: </label><input id="user" type="text">
		<button id="connect">Connect</button>
	</fieldset>
	<fieldset id="chat">
		<legend>Chat</legend>
		<div id="messages" style="font-family: monospace;"></div>
		<label for="message">Message: </label><input id="message" type="text">
		<button id="send">Send</button>
		<button id="disconnect">Disconnect</button>
	</fieldset>
</body>
</html>
